<template>
  <div class="grid-charts-container">
    <h1>多图表网格布局展示</h1>

    <!-- 图表网格容器 -->
    <div class="charts-grid">
      <!-- 第一个图表 -->
      <div class="chart-card">
        <h2>每周数据统计</h2>
        <div id="chart-1" class="chart-wrapper"></div>
      </div>

      <!-- 第二个图表 -->
      <div class="chart-card">
        <h2>月度销售对比</h2>
        <div id="chart-2" class="chart-wrapper"></div>
      </div>

      <!-- 第三个图表 -->
      <div class="chart-card">
        <h2>产品类别销量</h2>
        <div id="chart-3" class="chart-wrapper"></div>
      </div>

      <!-- 第四个图表 -->
      <div class="chart-card">
        <h2>地区销售分布</h2>
        <div id="chart-4" class="chart-wrapper"></div>
      </div>

      <!-- 第五个图表 -->
      <div class="chart-card">
        <h2>客户满意度评分</h2>
        <div id="chart-5" class="chart-wrapper"></div>
      </div>

      <!-- 第六个图表 -->
      <div class="chart-card">
        <h2>营销活动效果</h2>
        <div id="chart-6" class="chart-wrapper"></div>
      </div>
      <div class="chart-card">
        <h2>每日流量统计</h2>
        <div id="chart-7" class="chart-wrapper"></div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import { onMounted, onUnmounted, ref } from 'vue'

export default {
  name: 'GridLayoutCharts',
  setup() {
    // 存储所有图表实例的引用
    const charts = ref({})

    // 初始化图表的通用函数
    const initChart = (chartId, option) => {
      const dom = document.getElementById(chartId)
      if (dom) {
        charts.value[chartId] = echarts.init(dom)
        charts.value[chartId].setOption(option)
      }
    }

    // 组件挂载时初始化所有图表
    onMounted(() => {
      // 图表1配置
      initChart('chart-1', {
        xAxis: { type: 'category', data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'] },
        yAxis: { type: 'value' },
        series: [{
          data: [120, 200, 150, 80, 70, 110, 130],
          type: 'bar',
          itemStyle: { color: '#5b9bd5' }
        }]
      })

      // 图表2配置
      initChart('chart-2', {
        xAxis: { type: 'category', data: ['1月', '2月', '3月', '4月', '5月', '6月'] },
        yAxis: { type: 'value', name: '销售额(元)' },
        series: [
          { name: '2023年', data: [35000, 42000, 58000, 45000, 62000, 78000], type: 'bar', itemStyle: { color: '#7cb5ec' } },
          { name: '2024年', data: [42000, 51000, 63000, 59000, 75000, 88000], type: 'bar', itemStyle: { color: '#434348' } }
        ],
        legend: { data: ['2023年', '2024年'], top: 0 }
      })

      // 图表3配置
      initChart('chart-3', {
        xAxis: { type: 'category', data: ['电子产品', '服装鞋帽', '食品饮料', '家居用品', '图书音像', '美妆个护'] },
        yAxis: { type: 'value', name: '销量(件)' },
        series: [{
          data: [1250, 890, 2100, 650, 420, 780],
          type: 'bar',
          itemStyle: {
            color: params => ['#c23531', '#2f4554', '#61a0a8', '#d48265', '#91c7ae', '#749f83'][params.dataIndex]
          }
        }]
      })

      // 图表4配置
      initChart('chart-4', {
        xAxis: { type: 'category', data: ['华东', '华北', '华南', '西北', '西南', '东北'] },
        yAxis: { type: 'value', name: '销售额占比(%)' },
        series: [{
          data: [35, 25, 20, 8, 7, 5],
          type: 'bar',
          label: { show: true, position: 'top', formatter: '{c}%' },
          itemStyle: { color: '#2a9d8f' }
        }]
      })

      // 图表5配置
      initChart('chart-5', {
        xAxis: { type: 'category', data: ['产品质量', '服务态度', '物流速度', '包装设计', '价格优势'] },
        yAxis: { type: 'value', max: 10, name: '评分' },
        series: [{
          data: [8.5, 9.2, 7.8, 8.9, 7.5],
          type: 'bar',
          itemStyle: { color: '#f4b63f' }
        }]
      })

      // 图表6配置
      initChart('chart-6', {
        xAxis: { type: 'category', data: ['春季促销', '618活动', '中秋活动', '国庆活动', '双11活动', '年终促销'] },
        yAxis: { type: 'value', name: '增长比例(%)' },
        series: [{
          data: [15, 35, 20, 25, 45, 30],
          type: 'bar',
          itemStyle: { color: '#e74c3c' }
        }]
      })

      // 图表7配置
      initChart('chart-7', {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
            axisTick: {
              alignWithLabel: true
            }
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: 'Direct',
            type: 'bar',
            barWidth: '60%',
            data: [10, 52, 200, 334, 390, 330, 220]
          }
        ]
      })
      // 监听窗口大小变化
      window.addEventListener('resize', handleResize)
    })

    // 响应窗口大小变化
    const handleResize = () => {
      Object.values(charts.value).forEach(chart => {
        chart && chart.resize()
      })
    }

    // 组件卸载时销毁所有图表
    onUnmounted(() => {
      window.removeEventListener('resize', handleResize)
      Object.values(charts.value).forEach(chart => {
        chart && chart.dispose()
      })
    })

    return {}
  }
}
</script>

<style scoped>
.grid-charts-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 20px;
}

h1 {
  text-align: center;
  color: #333;
  margin: 30px 0;
  font-size: 2rem;
}

/* 网格布局 - 默认两列 */
.charts-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
}

/* 响应式调整 - 小屏幕时改为单列 */
@media (max-width: 992px) {
  .charts-grid {
    grid-template-columns: 1fr;
  }
}

/* 三列布局 (可选) */
/* 
.charts-grid {
  grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 1200px) {
  .charts-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .charts-grid {
    grid-template-columns: 1fr;
  }
}
*/

.chart-card {
  background-color: #fff;
  border-radius: 10px;
  padding: 20px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transition: transform 0.3s ease;
}

.chart-card:hover {
  transform: translateY(-5px);
}

.chart-card h2 {
  color: #444;
  margin-bottom: 15px;
  font-size: 1.2rem;
  padding-bottom: 10px;
  border-bottom: 1px solid #f0f0f0;
}

.chart-wrapper {
  width: 100%;
  height: 350px;
  /* 图表高度 */
}
</style>
